﻿
@{
    ViewBag.Title = "Sign Up";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section head {

    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="~/Content/css/bootstrap.min.css">
    <link rel="stylesheet" href="~/Content/css/animate.css">
    <link rel="stylesheet" href="~/Content/css/signstyle.css">

    <!-- Modernizr JS -->
    <script src="~/Content/js/modernizr-2.6.2.min.js"></script>
    <!-- FOR IE9 below -->
    <!--[if lt IE 9]>
    <script src="~/Content/js/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="http://pv.sohu.com/cityjson?ie=utf-8" charset="utf-8"></script>
}
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <!-- Start Sign In div -->
            <div class="fh5co-form animate-box" data-animate-effect="fadeIn">
                <h2>Sign Up</h2>
                <div class="form-group">
                    <label for="username" class="sr-only">Username</label>
                    <input type="text" class="form-control" id="username" placeholder="Username" maxlength="10" autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="fullname" class="sr-only">Full Name</label>
                    <input type="text" class="form-control" id="fullname" placeholder="Full Name" maxlength="20" autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="password" class="sr-only">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Password" maxlength="16" autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="re-password" class="sr-only">Re-type Password</label>
                    <input type="password" class="form-control" id="re-password" placeholder="Re-Password" maxlength="16" autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="verify-code" class="sr-only">Verify Code</label>
                    <input type="text" class="form-control" id="verify-code" placeholder="Verify Code" maxlength="10" autocomplete="off" style="width:65%;float:left;">
                    <img id="imgCode" src="/User/VerifyCode" class="form-control" style="width:30%;margin-left:15%;height:35px;" />
                </div>
                <div class="form-group">
                    <p>Already registered? <a href="/User/Login">Sign In</a></p>
                </div>
                <div id="msg" class="form-group">
                    <div class="alert alert-warning" role="alert"></div>
                </div>
                <div class="form-group">
                    <button id="btnRegister" class="btn btn-primary">
                        <span>Sign Up</span>
                    </button>
                </div>
            </div>
            <!-- END Sign In div -->
        </div>
    </div>
</div>
<!-- Bootstrap -->
<script src="~/Content/js/bootstrap.min.js"></script>
<!-- Placeholder -->
<script src="~/Content/js/jquery.placeholder.min.js"></script>
<!-- Waypoints -->
<script src="~/Content/js/jquery.waypoints.min.js"></script>
<!-- Main JS -->
<script src="~/Content/js/main.js"></script>
<script>
    $(function () {
        $("#msg").hide();
        $("#btnRegister").attr('disabled', 'true');
        //当用户名失去焦点时验证数据库是否已存在此账号
        $("#username").blur(function () {
            var userName = $("#username").val();
            if (userName.length == 0) {
                return;
            }
            $.ajax({
                url: "/User/VerifyName", dataType: "json",
                type: "post", data: { userName: userName },
                success: function (res) {
                    if (res.Status == "OK") {
                        $("#msg").hide();
                        $("#btnRegister").removeAttr("disabled");
                    } else {
                        $("#msg").show().find('div').html(res.ErrorMsg);
                    }
                }, error: function () {
                    $("#msg").show().find('div').html("Network error");
                }
            });
        });
        $("#username").focus(function () {
            $("#msg").hide();
        });
    });
    //点击注册按钮
    $("#btnRegister").click(function () {
        var inputCode = $("#verify-code").val();
        if (inputCode == "") {
            $("#msg").show().find('div').html("Please input captcha!");
        }
        var userName = $("#username").val();
        if (userName == "") {
            $("#msg").show().find('div').html("Please input username!");
        }
        var fullName = $("#fullname").val();
        if (fullName == "") {
            $("#msg").show().find('div').html("Please input fullname!");
        }
        var pwd = $("#password").val();
        if (pwd == "") {
            $("#msg").show().find('div').html("Please input password!");
        }
        var i = returnCitySN;
        var userIP = i['cip'];
        var userCity = i['cname'];
        $("#btnRegister").attr('disabled', 'true');
        $("#btnRegister").val("Loading...");
        $.ajax({
            url: "/User/Register", dataType: "json",
            type: "post", data: { userName: userName, fullName: fullName, passWord: pwd, verifyCode: inputCode, IP: userIP, City: userCity },
            success: function (res) {
                if (res.Status == "OK") {
                    alert("Register succeed!");
                    location.href = "/User/Login";//如果注册成功，则自动跳转到登录页
                } else {
                    $("#msg").show().find('div').html(res.ErrorMsg);
                    $("#btnRegister").find('span').html("Sign Up");
                    $("#btnRegister").removeAttr("disabled");
                    $("#imgCode").click();
                }
            }, error: function () {
                $("#msg").show().find('div').html("Network error");
                $("#btnRegister").find('span').html("Sign Up");
                $("#btnRegister").removeAttr("disabled");
                $("#imgCode").click();
            }
        });
    });
    $("#imgCode").click(function () {
        $("#imgCode").attr("src", "/User/VerifyCode?" + Math.random());
    })
</script>
